import { FC } from 'react'
import { TabBar } from 'antd-mobile'
import {
    useLocation,
    MemoryRouter as Router,
    useNavigate,
} from 'react-router-dom'

import {
    TagOutline,
    AppOutline,
    UnorderedListOutline,
    UserOutline,
} from 'antd-mobile-icons'
import { Outlet } from "react-router-dom"

import styles from '@/assets/css/home.module.less'

const Bottom: FC = () => {
    const location = useLocation()
    const { pathname } = location
    const navigate = useNavigate();


    const setRouteActive = (value: string) => {
        navigate(value)
    }

    const tabs = [
        {
            key: '/home/task',
            title: '我的待办',
            icon: <TagOutline />,
        },
        {
            key: '/home/work',
            title: '公司排名',
            icon: <UnorderedListOutline />,
        },
        {
            key: '/home/mywork',
            title: '本月数据',
            icon: <AppOutline />,
        },
        {
            key: '/home/aboutme',
            title: '我的',
            icon: <UserOutline />,
        },
    ]

    return (
        <TabBar activeKey={pathname} onChange={value => setRouteActive(value)}>
            {tabs.map(item => (
                <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
            ))}
        </TabBar>
    )
}

export default () => {
    return (
        <div className={styles.app}>
            <div className={styles.body}>
                <Outlet></Outlet>
            </div>
            <div className={styles.bottom}>
                <Bottom />
            </div>
        </div>
    )
}
